<!DOCTYPE html>
<html>
<head>
    <!--
    网页基础内容：
    1、财务管理功能
　　财务管理功能中包含了会计分支：总账、应收账、应付账、现金管理、固定资产核算、工资核算等。财务分支：财务计划、财务分析、财务决策。财务部门是企业的核心组成部分，当财务部门的运转效率得到提高后，可以加强与各个部门的协同工作。
　　2、销售管理功能
　　销售管理模块中主要由：客户管理、意向客户管理、销售管理、合同管理、竞争对手管理、商品管理等功能组成。销售部门作为企业的与客户之间的桥梁，有着维护老客户、开拓新商业线、加强商业合作等重要作用，将销售部门进行信息化管理非常重要。
　　3、采购管理功能
　　采购管理功能包括：采购申请管理、订单管理、发票管理、质检管理、供应商管理、比价管理、合同管理等内容。采购决定着成本，合理简化采购流程可以更好对人员和预算进行管理，利用系统录入完整的采购数据，方便其管理统计和优化，降低采购成本。
　　4、生产管理功能
　　生产管理功能：生产进度管理、生产材料管理、生产质量管理、生产人员管理、生产制度管理、生产设备管理等。生产部门注重效率和质量，一切的功能都为这两个条件来服务，系统化的管理可以规范生产流程，提高人员素养，保证设备的稳定运行，提高生产效率、生产质量。
　　5、仓库管理功能
　　仓库管理功能内建立了：业务批次管理、保质期管理、质量检验管理、库存管理、虚仓管理等模块。传统手工账本早已无法满足仓库的多样化管理，只有将其纳入仓库管理系统，才能保证供应链的完整，才能让进货和库存的需求得到满足。
　　6、人力资源管理功能
　　人力资源管理系统涵盖了：员工档案管理、组织架构管理、合同管理、工资管理、社保管理、考核绩效管理、出勤管理。人才的管理才是新时代企业管理的核心，优秀的人才可以给企业带来新鲜的血液。
    -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        /*初始化*/
        * {
            z-index: 0;
            padding: 0;
            margin: 0;
        }

        /*网页背景色*/
        body {
            background-color: rgba(221, 221, 221, 0.85);
        }

        /*子节点选中样式(前面只有一级，后面子级)*/
        .el-menu-item.is-active, .el-submenu el-menu-item.is-active {
            background-color: rgba(95, 92, 89, 0.91) !important;
            color: white;
        }

        /*侧面导航栏字体颜色*/
        .el-menu-item {
            color: rgba(181, 178, 172, 0.91);
        }

        .el-menu-item-group .el-menu-item, div.el-menu-item-group__title {
            background-color: rgba(56, 53, 51, 0.91);
        }

        /*子节点选中鼠标移入样式*/
        .el-menu-item.is-active:hover, .el-submenu .el-menu-item:hover {
            background-color: rgba(95, 92, 89, 0.91) !important;
        }

        /*子节点鼠标移入样式*/
        .el-menu-item:hover, div.el-submenu__title:hover {
            background-color: rgba(95, 92, 89, 0.91) !important;
        }

        .el-aside::-webkit-scrollbar {
            display: none;
        }

        .el-main > div {
            width: 100%;
            height: 100vh;
        }

        /*大于100%*/
        .el-menu-vertical-side:not(.el-menu--collapse) {
            width: 200px;
            min-height: 100%;
            color: white;
            background-color: rgba(56, 53, 51, 0.91);
        }

        /*大于100%*/
        .el-menu-vertical-side {
            /*width为0则没有侧边栏了*/
            color: white;
            background-color: rgba(56, 53, 51, 0.91);
            height: 100%;;
        }

        /*小于100%*/
        .el-menu-vertical-side-bos:not(.el-menu--collapse) {
            width: 200px;
            min-height: 100%;
            color: white;
            background-color: rgba(56, 53, 51, 0.91);
            z-index: 999;
        }

        /*小于100%*/
        .el-menu-vertical-side-bos {
            /*width为0则没有侧边栏了*/
            color: white;
            background-color: rgba(56, 53, 51, 0.91);
            height: 100%;
            width: 0;
        }

        div hr {
            border-color: rgba(116, 113, 111, 0.91);
            margin: 10px 10px;
        }

        i {
            color: gray;
            font-size: 120%;
            display: inline-block;
        }

        div > .el-container > .el-container > .el-header > div > div > ul > li {
            float: left;
            margin-right: 20px;
        }

        div > .el-container > .el-container > .el-header > div > .el-collapse-transition > div > div > div {
            float: left;
            width: 100%;
        }

        .receivables_formSubmit_search {
            width: 200px;
            float: left;
            right: 10px;
            background-color: white;
        }

        .data-canRead {
            width: 380px;
            height: 380px;
            margin-top: 15px;
            box-shadow: 0px 5px 5px #8d858a;
            float: left;
            margin-right: 16px;
        }

        .data-canRead > .el-card {
            width: 100%;
            height: 100%;
        }

        /*下次注解前 都为悬浮变色*/
        #expand1:hover {
            color: gray;
        }

        #expand1 {
            color: black;
        }

        #expand2:hover {
            color: gray;
        }

        #expand2 {
            color: black;
        }

        #expand3:hover {
            color: gray;
        }

        #expand3 {
            color: black;
        }

        #expand4:hover {
            color: gray;
        }

        #expand4 {
            color: black;
        }

        #expand5 {
            color: black;
            margin: 10px;
        }

        #expand5:hover {
            color: gray;
            margin: 10px;
        }

        #expand6 {
            color: black;
            margin: 10px;
        }

        #expand6:hover {
            color: gray;
            margin: 10px;
        }

        #expand8 {
            color: black;
            margin: 10px;
        }

        #expand8:hover {
            color: gray;
            margin: 10px;
        }

        #expand9 {
            color: rgba(177, 15, 16, 0.91);
            margin: 10px;
        }

        #expand9:hover {
            color: rgba(255, 22, 23, 0.91);
            margin: 10px;
        }

        /*导航栏三角旋转*/
        .rotate {
            transition: all 1s;
        }

        .rotate1 {
            transform: rotate(-90deg);
            transition: all 1s;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--侧边导航栏-->
        <el-aside style="width:auto;">
            <el-menu v-if="!BOS" default-active="1-8" class="el-menu-vertical-side" @open="handleOpen"
                     @close="handleClose" @select="handleSelect"
                     :collapse="isCollapse" style="height: 100%">
                <el-menu-item @click="expand">
                    <img src="imgs/deerHead.jpg" style="width: 25px;height:25px;border-radius: 10px">
                    <template slot="title">
                        <span slot="title">&nbsp;&nbsp;欢迎使用ERP系统</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="1">
                    <i class="el-icon-s-home"></i>
                    <template slot="title">
                        <span slot="title">首页</span>
                    </template>
                </el-menu-item>
                <hr>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-data"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">财务管理</span>
                    </template>
                    <!--财务管理-->
                    <el-menu-item-group>
                        <el-menu-item index="2-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <span slot="title">会计分支</span>
                        <el-menu-item index="2-1">&nbsp;&nbsp;&nbsp;&nbsp;总账</el-menu-item>
                        <el-menu-item index="2-2">&nbsp;&nbsp;&nbsp;&nbsp;应收帐</el-menu-item>
                        <el-menu-item index="2-3">&nbsp;&nbsp;&nbsp;&nbsp;固定资产</el-menu-item>
                        <el-menu-item index="2-4">&nbsp;&nbsp;&nbsp;&nbsp;工资核算</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <span slot="title">财务分支</span>
                        <el-menu-item index="2-5">&nbsp;&nbsp;&nbsp;&nbsp;财务计划</el-menu-item>
                        <el-menu-item index="2-6">&nbsp;&nbsp;&nbsp;&nbsp;财务分析</el-menu-item>
                        <el-menu-item index="2-7">&nbsp;&nbsp;&nbsp;&nbsp;财务决策</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!--销售管理-->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-marketing"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">销售管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                        <el-menu-item index="3-1">&nbsp;&nbsp;&nbsp;&nbsp;客户管理</el-menu-item>
                        <el-menu-item index="3-2">&nbsp;&nbsp;&nbsp;&nbsp;意向客户</el-menu-item>
                        <el-menu-item index="3-3">&nbsp;&nbsp;&nbsp;&nbsp;销售管理</el-menu-item>
                        <el-menu-item index="3-4">&nbsp;&nbsp;&nbsp;&nbsp;合同管理</el-menu-item>
                        <el-menu-item index="3-5">&nbsp;&nbsp;&nbsp;&nbsp;商品管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!--采购管理-->
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-s-claim"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">采购管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                        <el-menu-item index="4-1">&nbsp;&nbsp;&nbsp;&nbsp;采购申请</el-menu-item>
                        <el-menu-item index="4-2">&nbsp;&nbsp;&nbsp;&nbsp;订单管理</el-menu-item>
                        <el-menu-item index="4-3">&nbsp;&nbsp;&nbsp;&nbsp;发票管理</el-menu-item>
                        <el-menu-item index="4-4">&nbsp;&nbsp;&nbsp;&nbsp;质检管理</el-menu-item>
                        <el-menu-item index="4-5">&nbsp;&nbsp;&nbsp;&nbsp;供应商管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!--生产管理-->
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-s-platform"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">生产管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                        <el-menu-item index="5-1">&nbsp;&nbsp;&nbsp;&nbsp;进度管理</el-menu-item>
                        <el-menu-item index="5-2">&nbsp;&nbsp;&nbsp;&nbsp;材料管理</el-menu-item>
                        <el-menu-item index="5-3">&nbsp;&nbsp;&nbsp;&nbsp;质量管理</el-menu-item>
                        <el-menu-item index="5-4">&nbsp;&nbsp;&nbsp;&nbsp;设备管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!--仓库管理-->
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-s-shop"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">仓库管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                        <el-menu-item index="6-1">&nbsp;&nbsp;&nbsp;&nbsp;业务管理</el-menu-item>
                        <el-menu-item index="6-2">&nbsp;&nbsp;&nbsp;&nbsp;保质期管理</el-menu-item>
                        <el-menu-item index="6-3">&nbsp;&nbsp;&nbsp;&nbsp;质检管理</el-menu-item>
                        <el-menu-item index="6-4">&nbsp;&nbsp;&nbsp;&nbsp;库存管理</el-menu-item>
                        <el-menu-item index="6-5">&nbsp;&nbsp;&nbsp;&nbsp;虚仓管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!--人力资源管理-->
                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">人力资源</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="7-0">&nbsp;&nbsp;&nbsp;&nbsp;*数据综合</el-menu-item>
                        <el-menu-item index="7-1">&nbsp;&nbsp;&nbsp;&nbsp;员工档案</el-menu-item>
                        <el-menu-item index="7-2">&nbsp;&nbsp;&nbsp;&nbsp;合同管理</el-menu-item>
                        <el-menu-item index="7-3">&nbsp;&nbsp;&nbsp;&nbsp;工资管理</el-menu-item>
                        <el-menu-item index="7-4">&nbsp;&nbsp;&nbsp;&nbsp;社保管理</el-menu-item>
                        <el-menu-item index="7-5">&nbsp;&nbsp;&nbsp;&nbsp;考核绩效</el-menu-item>
                        <el-menu-item index="7-6">&nbsp;&nbsp;&nbsp;&nbsp;出勤管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <hr>
                <el-menu-item index="8">
                    <i class="el-icon-setting"></i>
                    <span slot="title">设置</span>
                </el-menu-item>
            </el-menu>
            <el-menu v-if="BOS" default-active="1-5-1" class="el-menu-vertical-side-bos" @open="handleOpen"
                     @close="handleClose"
                     :collapse="isCollapse" style="height: 100%;">
                <el-menu-item @click="expand">
                    <img src="imgs/deerHead.jpg" style="width: 25px;height:25px;border-radius: 10px">
                    <template slot="title">
                        <span slot="title">&nbsp;&nbsp;欢迎使用ERP系统</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="1">
                    <i class="el-icon-s-home"></i>
                    <template slot="title">
                        <span slot="title">首页</span>
                    </template>
                </el-menu-item>
                <hr>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title" style="color:rgba(181,178,172,0.91) ">用户中心</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">分组一</span>
                        <el-menu-item index="2-1">&nbsp;&nbsp;&nbsp;&nbsp;选项1</el-menu-item>
                        <el-menu-item index="2-2">&nbsp;&nbsp;&nbsp;&nbsp;选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <span slot="title">分组二</span>
                        <el-menu-item index="2-3">&nbsp;&nbsp;&nbsp;&nbsp;选项3</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="3">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                </el-menu-item>
                <hr>
                <el-menu-item index="5">
                    <i class="el-icon-setting"></i>
                    <span slot="title">设置</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <!--BOS大于100%为true 小于等于100为false-->
            <!--缩放比例大于100%的顶部导航栏-->
            <el-header v-if="!BOS"
                       style="background-color: white; width:100%;height: auto">
                <div style="width: 100%;float: right">
                    <div style="display: inline-block;line-height: 32px;overflow: auto;margin-top: 15px;width: auto">
                        <i class="el-icon-search"
                           style="font-size: 120%;float: left;margin-right: 10px;margin-top: 5px"></i>
                        <input type="search" placeholder="搜索..." style="font-size: 120%;border: 0;">
                    </div>
                    <div style="float: right;width: 250px;display: inline-block;line-height: 50px;margin-right: 25px;margin-top: 5px;">
                        <ul style="list-style-type: none;overflow: hidden">
                            <li><i class="el-icon-message-solid" style="margin-top: 18px;"></i></li>
                            <li><i class="el-icon-message" style="margin-top: 18px;"></i></li>
                            <li>
                                <el-divider direction="vertical"></el-divider>
                            </li>
                            <li>{{name}}</li>
                            <li><img src="imgs/admin_female.png"
                                     style="display:block;background-color:gray;border-radius:30px;width:30px;height: 30px;margin-top: 8px">
                            </li>
                        </ul>
                    </div>
                </div>
            </el-header>
            <el-header v-if="BOS"
                       style="height: auto;width:100%;background-color: white;">
                <div style="height: 60px;float: left;vertical-align: middle" @click="expand">
                    <img src="imgs/deerHead.jpg" style="width:45px;height: 45px" align="absmiddle">
                    <span style="font-family: Bahnschrift;font-size: 150%;line-height: 60px;vertical-align: middle;"><b>ERP</b></span>
                    <i class="el-icon-s-operation" style="margin-left: 10px;font-size: 120%" id="expand1"></i>
                </div>
                <div style="float: right">
                    <i
                            @click="round" :class="[isRotate?'rotate1':'rotate']"
                            class="el-icon-caret-left" id="expand2"
                            style="font-size: 150%;float: right;margin-top: 18px"></i>
                </div>
                <div
                        style="width: 100%;background-color: rgba(239,239,239,0.91);float: left">
                    <el-collapse-transition>
                        <div v-show="!isRotate">
                            <div style="width: 100%;">
                                <div style="padding-bottom: 10px;margin-left: 10px">
                                    <i class="el-icon-message-solid" id="expand3" style="margin-top: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;消息通知</i>
                                </div>
                                <div style="padding-bottom: 10px;margin-left: 10px">
                                    <i class="el-icon-message" id="expand4" style="margin-top: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;商户提醒</i>
                                </div>
                                <el-divider></el-divider>
                                <div style="padding-bottom: 10px;margin-left: 10px">
                                    <img src="imgs/admin_female.png"
                                         style="display:block;background-color:gray;border-radius:30px;width:30px;height: 30px;margin-top: 8px;margin-bottom: 10px;float: left"
                                         align="absmiddle">
                                    <span style="display: inline-block;float: left;margin-left: 14px;line-height: 44px;vertical-align: middle">{{name}}</span>
                                    <i class="el-icon-caret-bottom"
                                       id="expand5" @click="expand1"
                                    ></i>
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </div>
                <div style="width: 100%;background-color: rgba(239,239,239,0.91);float: left">
                    <el-collapse-transition>
                        <div v-show="!isRotate1 && !isRotate">
                            <div style="width: 100%;padding-bottom: 20px">
                                <hr style="border: 1px black">
                                <el-card style="margin: 0 20px;border-radius: 15px">
                                    <div>
                                        <i class="el-icon-user-solid" id="expand6">&nbsp;&nbsp;&nbsp;&nbsp;用户中心</i>
                                    </div>
                                    <div>

                                    </div>
                                    <div>
                                        <i class="el-icon-s-tools" id="expand8">&nbsp;&nbsp;&nbsp;&nbsp;用户设置</i>
                                    </div>
                                    <hr style="border: 0">
                                    <div>
                                        <i class="el-icon-switch-button" id="expand9">&nbsp;&nbsp;&nbsp;&nbsp;退出账号</i>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </el-collapse-transition>
                </div>
            </el-header>
            <!--窗口大于100%的时候切换页面-->
            <el-main>
                <!--首页信息-->
                <div v-if="currentIndex=='1'">
                    <div>
                        <i class="el-icon-s-home">&nbsp;&nbsp;首页</i>
                    </div>
                    <div>
                        <div class="data-canRead">
                            <el-card></el-card>
                        </div>
                        <div class="data-canRead">

                        </div>
                    </div>
                </div>
                <!--销售管理——数据综合-->
                <div v-if="currentIndex=='2-0'">

                </div>
                <!--财务管理——总账-->
                <div v-if="currentIndex=='2-1'">
                    <div>
                        <i class="el-icon-s-data">&nbsp;&nbsp;总账</i>
                    </div>
                    <div>
                        <!--生成总账表单 打印生成-->
                        <div class="data-canRead" style="width: 100%;">

                        </div>
                    </div>
                </div>
                <!--财务管理——应收账-->
                <div v-if="currentIndex == '2-2'">
                    <div>
                        <i class="el-icon-s-data">&nbsp;&nbsp;应收帐</i>
                    </div>
                    <div class="data-canRead" style="width: 100%;background-color: white;height: auto">
                        <el-divider content-position="left">信息查询</el-divider>
                        <div class="receivables_formSubmit_search" style="background-color: white">
                            <el-date-picker
                                    style="width: 100%;"
                                    v-model="receivables_form.date"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="请输入收入类型"
                                    v-model="receivables_form.incomeType"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="请输入摘要"
                                    v-model="receivables_form.abstract"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-select
                                    style="width: 100%;"
                                    v-model="receivables_form.tradeMethod"
                                    placeholder="请选择交易方式">
                                <el-option
                                        v-for="item in tradeMethods"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="请输入金额"
                                    v-model="receivables_form.amouct"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="请输入备注"
                                    v-model="receivables_form.remarks"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search" style="width:auto;">
                            <el-button
                                    type="primary"
                                    style="height: 40px;">
                                <i class="el-icon-search" style="color: white"></i>
                            </el-button>
                        </div>
                        <el-table :data="receivables" style="width: 100%">
                            <el-table-column prop="date" label="日期" width="200px"></el-table-column>
                            <el-table-column prop="incomeType" label="收入类型" width="200px"></el-table-column>
                            <el-table-column prop="abstract" label="摘要" width="200px"></el-table-column>
                            <el-table-column prop="tradeMethod" label="交易方式" width="200px"></el-table-column>
                            <el-table-column prop="amount" label="金额" width="200px"></el-table-column>
                            <el-table-column prop="remarks" label="备注" width="200px"></el-table-column>
                            <el-table-column label="操作" width="200px">
                                <!--slot-scope="scope" 定义了一个scope变量,
                                    在此变量中保存着当前行的相关信息
                                    scope.$index 得到当前行对应的下标
                                    scope.row得到的是当前行对应的数组里面的对象
                                    此处的template必须添加
                                    -->
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column></el-table-column>
                        </el-table>
                    </div>
                </div>
                <!--财务管理——固定资产-->
                <div v-if="currentIndex == '2-3'">
                    <div>
                        <i class="el-icon-s-data">&nbsp;&nbsp;固定资产</i>
                    </div>
                    <div class="data-canRead" style="width: 100%;background-color: white;height: auto">
                        <el-divider content-position="left">信息查询</el-divider>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="资产名称..."
                                    v-model="fixed_assets_form.assetName"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="资产分类..."
                                    v-model="fixed_assets_form.assetClassification"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="资产原值..."
                                    v-model="fixed_assets_form.originValueAsset"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search" style="background-color: white">
                            <el-date-picker
                                    style="width: 100%;"
                                    v-model="fixed_assets_form.dateAcquisition"
                                    type="datetime"
                                    placeholder="购置日期...">
                            </el-date-picker>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="规格型号..."
                                    v-model="fixed_assets_form.specificationModel"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="责任者..."
                                    v-model="fixed_assets_form.responsePerson"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="备注..."
                                    v-model="fixed_assets_form.remarks"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search" style="width:auto;">
                            <el-button
                                    type="primary"
                                    style="height: 40px;">
                                <i class="el-icon-search" style="color: white"></i>
                            </el-button>
                        </div>
                        <el-table :data="fixed_assets" style="width: 100%">
                            <el-table-column prop="id" label="编号" width="200px"></el-table-column>
                            <el-table-column prop="assetName" label="资产名称" width="200px"></el-table-column>
                            <el-table-column prop="assetClassification" label="资产分类" width="200px"></el-table-column>
                            <el-table-column prop="originValueAsset" label="资产原值" width="200px"></el-table-column>
                            <el-table-column prop="dateAcquisition" label="购置日期" width="200px"></el-table-column>
                            <el-table-column prop="specificationModel" label="规格型号" width="200px"></el-table-column>
                            <el-table-column prop="responsePerson" label="责任者" width="200px"></el-table-column>
                            <el-table-column prop="remarks" label="备注" width="200px"></el-table-column>
                            <el-table-column label="操作" width="200px">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column></el-table-column>
                        </el-table>
                    </div>
                </div>
                <!--财务管理——工资核算-->
                <div v-if="currentIndex == '2-4'">
                    <div>
                        <i class="el-icon-s-data">&nbsp;&nbsp;工资核算</i>
                    </div>
                    <div class="data-canRead" style="width: 100%;background-color: white;height: auto">
                        <el-divider content-position="left">文件上传</el-divider>

                        <el-divider content-position="left">信息查询</el-divider>
                        <div class="receivables_formSubmit_search">
                            <el-input
                                    style="width: 100%;"
                                    type="text"
                                    placeholder="资产名称..."
                                    v-model="fixed_assets_form.assetName"></el-input>
                        </div>
                        <div class="receivables_formSubmit_search" style="width:auto;">
                            <el-button
                                    type="primary"
                                    style="height: 40px;">
                                <i class="el-icon-search" style="color: white"></i>
                            </el-button>
                        </div>
                        <el-table :data="payroll.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                                  style="width: 100%">
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                            <el-table-column label="操作" width="200px">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column></el-table-column>
                        </el-table>
                        <!-- 分页器 -->
                        <div class="block" style="margin-top:15px;">
                            <el-pagination align='center' @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="currentPage"
                                           :page-sizes="[1,5,10,20]"
                                           :page-size="pageSize"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="payroll.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
</html>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                currentIndex: "1",
                isCollapse: true,
                /* BOS: true -- x > 100% ; false -- x < 100% */
                BOS: true,
                isRotate: true,
                isRotate1: true,
                name: "金洋",
                /*交易方式*/
                tradeMethods: [
                    {
                        value: "zfb",
                        label: "支付宝"
                    },
                    {
                        value: "cash",
                        label: "现金"
                    },
                    {
                        value: "wechat",
                        label: "微信"
                    },
                    {
                        value: "transfer",
                        label: "转账"
                    },
                    {
                        value: "companyUser",
                        label: "公司账号"
                    },
                ],
                /*应收账
                日期
                收入类型(例:加工费)
                摘要("应收-百世特")
                交易方式(支付宝、微信、公司账号、转账)
                备注
                Receivables:{
                    date:"",
                    incomeType:"",
                    abstract:"",
                    amount:"",
                    tradeMethod:"",
                    remarks:""
                }
                */
                receivables: [
                    {
                        date: "2020-4-1",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "320",
                        tradeMethod: "现金",
                        remarks: ""
                    },
                    {
                        date: "2020-4-2",
                        incomeType: "加工费",
                        abstract: "应收-贝特来福",
                        amount: "450",
                        tradeMethod: "支付宝",
                        remarks: ""
                    },
                    {
                        date: "2020-4-3",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "470",
                        tradeMethod: "微信",
                        remarks: ""
                    },
                    {
                        date: "2020-4-4",
                        incomeType: "加工费",
                        abstract: "应收-贝特来福",
                        amount: "510",
                        tradeMethod: "公司账号",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                    {
                        date: "2020-4-5",
                        incomeType: "加工费",
                        abstract: "应收-百世特",
                        amount: "790",
                        tradeMethod: "转账",
                        remarks: ""
                    },
                ],
                receivables_form: {date: "", incomeType: "", abstract: "", amount: "", tradeMethod: "", remarks: ""},
                /*固定资产
                * id:资产编号
                * assetName:资产名称
                * assetClassification:资产分类
                * originValueAsset:资产原值
                * dateAcquisition:购置日期
                * specificationModel:规格型号
                * responsePerson:责任者
                * remarks:备注
                * */
                fixed_assets: [
                    {
                        id: "DS001",
                        assetName: "印刷机",
                        assetClassification: "机器设备",
                        originValueAsset: 50000000,
                        dateAcquisition: "2021-7-1",
                        specificationModel: "规格1",
                        responsePerson: "于立杰",
                        remarks: "1车间"
                    },
                    {
                        id: "DS002",
                        assetName: "办公楼",
                        assetClassification: "房屋建筑",
                        originValueAsset: 65000000,
                        dateAcquisition: "2021-7-2",
                        specificationModel: "规格2",
                        responsePerson: "关雪",
                        remarks: "2车间"
                    },
                    {
                        id: "DS003",
                        assetName: "电脑",
                        assetClassification: "办公设备",
                        originValueAsset: 6800,
                        dateAcquisition: "2021-7-3",
                        specificationModel: "规格4",
                        responsePerson: "阿金",
                        remarks: "3车间"
                    },
                    {
                        id: "DS004",
                        assetName: "电视机",
                        assetClassification: "办公设备",
                        originValueAsset: 5200,
                        dateAcquisition: "2021-7-4",
                        specificationModel: "规格5",
                        responsePerson: "阿杰",
                        remarks: "4车间"
                    },
                    {
                        id: "DS005",
                        assetName: "复印件",
                        assetClassification: "办公设备",
                        originValueAsset: 4800,
                        dateAcquisition: "2021-7-5",
                        specificationModel: "规格6",
                        responsePerson: "阿农",
                        remarks: "5车间"
                    },
                    {
                        id: "DS006",
                        assetName: "小汽车",
                        assetClassification: "办公设备",
                        originValueAsset: 28900,
                        dateAcquisition: "2021-7-6",
                        specificationModel: "规格7",
                        responsePerson: "阿雪",
                        remarks: "6车间"
                    },
                    {
                        id: "DS007",
                        assetName: "打印机",
                        assetClassification: "办公设备",
                        originValueAsset: 4300,
                        dateAcquisition: "2021-7-8",
                        specificationModel: "规格8",
                        responsePerson: "阿林",
                        remarks: "7车间"
                    },
                    {
                        id: "DS008",
                        assetName: "叉车",
                        assetClassification: "办公设备",
                        originValueAsset: 89000,
                        dateAcquisition: "2021-7-9",
                        specificationModel: "规格9",
                        responsePerson: "阿洋",
                        remarks: "8车间"
                    },
                    {
                        id: "DS009",
                        assetName: "笔记本",
                        assetClassification: "办公设备",
                        originValueAsset: 2100,
                        dateAcquisition: "2021-7-10",
                        specificationModel: "规格10",
                        responsePerson: "阿May",
                        remarks: "9车间"
                    },
                ],
                fixed_assets_form: {
                    id: "",
                    assetName: "",
                    assetClassification: "",
                    originValueAsset: "",
                    dateAcquisition: "",
                    specificationModel: "",
                    responsePerson: "",
                    remarks: ""
                },
                /*工资核算*/
                payroll: [
                    {
                        date: "2016-05-02",
                        name: "第一页",
                        address: "上海市普陀区金沙江路 1518 弄"
                    },
                    {
                        date: "2016-05-04",
                        name: "第二页",
                        address: "上海市普陀区金沙江路 1517 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第三页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第四页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-01",
                        name: "第五页",
                        address: "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    },
                    {
                        date: "2016-05-03",
                        name: "第六页",
                        address: "上海市普陀区金沙江路 1516 弄"
                    }],
                currentPage: 1,//初始页面
                /*total: 20,总数据条数*/
                pageSize: 20,//每页数据数量
            }
        },
        methods: {
            /*图标下拉框*/
            expand() {
                if (v.isCollapse === true) {
                    v.isCollapse = false;
                } else {
                    v.isCollapse = true;
                }
            }
            ,
            expand1() {
                if (v.isRotate1 === true) {
                    v.isRotate1 = false;
                } else {
                    v.isRotate1 = true;
                }
            }
            ,
            /*图标旋转*/
            round() {
                this.isRotate = !this.isRotate;
            }
            ,
            /*菜单栏打开*/
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            }
            ,
            /*菜单栏收起*/
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
            ,
            /*网页转换*/
            handleSelect(key, keyPath) {
                if (key == null) {
                    return;
                }
                v.currentIndex = key;
            }
            ,
            /*表单编辑*/
            handleEdit() {

            }
            ,
            /*表单删除*/
            handleDelete(i) {
                v.receivables.splice(i, 1);
            }
            ,
            /*表单提交*/
            handleSubmit() {
                let r = {
                    date: v.receivables_form.date,
                    incomeType: v.receivables_form.incomeType,
                    abstract: v.receivables_form.abstract,
                    amount: v.receivables_form.amount,
                    tradeMethod: v.receivables_form.tradeMethod,
                    remarks: v.receivables_form.remarks
                }
                v.receivables.push(r);
            },
            /*表格*/
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        }
    })
    // 检测浏览器缩放比例
    window.onresize = function detectZoom() {
        var ratio = 0,
            screen = window.screen,
            ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
            ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
            if (screen.deviceXDPI && screen.logicalXDPI) {
                ratio = screen.deviceXDPI / screen.logicalXDPI;
            }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
            ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
            ratio = Math.round(ratio * 100);
        }

        let result = ratio;
        if (result > 100) {
            v.BOS = true;
        } else {
            v.BOS = false;
        }
        console.log(result);
        console.log(v.BOS);
    };

</script>
